<template>
	<view>
		<view class="common-style" :class="!isShowTitle?'no-show-title':''">
			<slot name="tips"></slot>
			<view class="title" v-if="isShowTitle">
				{{title}}
			</view>
			<slot name="region"></slot>
			<slot name="amount"></slot>
		</view>
	</view>
</template>

<script setup lang='ts'>
	const props = withDefaults(
		defineProps < {
			title: string;
			isShowTitle ? : boolean
		} > (),
		//设置默认值
		{
			title: '',
			isShowTitle: () => true
		}
	)
</script>

<style scoped lang='scss'>
	.common-style {
		width: 100%;
		background-color: #fff;
		margin-top: 20rpx;

		.title {
			padding: 20rpx 32rpx 20rpx 60rpx;
			font-size: 28rpx;
			border-bottom: 2rpx solid #f3f4f6;
			position: relative;

			&:before {
				content: "";
				width: 8rpx;
				height: 28rpx;
				background-color: #157ef9;
				position: absolute;
				top: 26rpx;
				left: 34rpx;
				border-radius: 10rpx;
			}
		}
	}

	.no-show-title {
		padding: 20rpx 0rpx;
	}
</style>